<template>
  <div class="fillcontain">
    <div class="table_container">
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            label="id"
            prop="id">
        </el-table-column>
        <el-table-column
            label="书籍名称"
            prop="name">
        </el-table-column>
        <el-table-column
            label="作者"
            prop="author">
        </el-table-column>
        <el-table-column
            label="单价"
            prop="unitPrice">
        </el-table-column>
        <el-table-column
            label="数量"
            prop="stock">
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleedit(scope.$index, scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="Pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="count">
        </el-pagination>
      </div>
      <el-dialog title="修改店铺信息"  :visible.sync="dialogFormVisible">
        <el-form :model="selectTable"  label-width="110px" class="form food_form">
          <div >
              <img :src="$target + selectTable.goodsShelf" width=200px height=200px />
          </div>
          <el-form-item label="书籍名称" prop="name">
            <el-input v-model="selectTable.name"></el-input>
          </el-form-item>
          <el-form-item label="书籍作者" prop="description">
            <el-input v-model="selectTable.author"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="description">
            <el-input v-model="selectTable.type"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="description">
            <el-input v-model="selectTable.stock"></el-input>
          </el-form-item>
          <el-form-item label="单价" prop="description">
            <el-input v-model="selectTable.unitPrice"></el-input>
          </el-form-item>
          <el-form-item label="更换新书籍图片" prop="description">
          </el-form-item>
          <el-upload
              class="upload-demo"
              ref="upload"
              action="http://4n437650p0.qicp.vip:32196/bookOnShelves"
              :data="selectTable"
              name="picture"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleAvatarSuccess"
              :on-change="loadJsonFromFile"
              :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <el-form-item>
            <el-button type="primary" @click="addFood('foodForm')">确认修改信息</el-button>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return {
      uploadFiles: [],
      city: {},
      offset: 0,
      limit: 10,
      count: 0,
      tableData: [],
      currentPage: 1,
      selectTable: {},
      dialogFormVisible: false,
      categoryOptions: [],
      selectedCategory: [],
      address: {},
    }
  },
  created(){
    this.getdata();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res);
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    loadJsonFromFile(file, fileList) {
      this.uploadFiles = fileList
    },
    handleedit(index,row)
    {
       this.selectTable=row
       this.dialogFormVisible=true

    },
    getdata(){
      axios.post('http://myphoenixshop.cpolar.io/findSellerBooksPage', {
        "pageNum":this.currentPage,
        "pageSize":this.limit
      },{
        headers:{
          "tokenValue":this.$store.getters.getUser
        }
      }).then(res=>{
        console.log(res);
        this.tableData=res.data.data.content;
        this.count=res.data.data.totalSize;
      })

    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata()
    },
    addFood()
    {
      let file = this.uploadFiles[0];
      var fd = new FormData()
      fd.append('picture', file.raw)
      fd.append('name',this.selectTable.name)
      fd.append('author',this.selectTable.author)
      fd.append('type',this.selectTable.type)
      fd.append('stock',this.selectTable.stock)
      fd.append('unitPrice',this.selectTable.unitPrice)
      fd.append('tokenValue',this.$store.getters.getUser)
      fd.append('bookId',this.selectTable.id)

      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      axios.post('http://myphoenixshop.cpolar.io/changeBookInfo',fd,config).then( res => {
        console.log(res)
      }).catch( res => {
        console.log(res)
      })
    }

  },
}
</script>

<style lang="less">
@import '../style/mixin';
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.table_container{
  padding: 20px;
}
.Pagination{
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
.order .content ul .pro-img {
  float: left;
  height: 85px;
  width: 120px;
  padding-left: 80px;
}
.order .content ul .pro-img img {
  height: 80px;
  width: 80px;
}
</style>
